<template>
	<view class="content">
		<view class="cu-modal bottom-modal" :class="[{ show: showModal }, modalType]" cathctouchmove @tap="hideModal">
			<view class="cu-dialog" @tap.stop style="background: none; overflow: visible;">
				<view class="share-box">
					<view class="share-list-box x-f">
						<!-- #ifdef MP-WEIXIN -->
						<button class="share-item share-btn y-f" open-type="share">
							<image class="share-img" :src="$IMG_URL + '/imgs/share_wx.png'" mode="widthFix"></image>
							<text class="share-title">微信好友</text>
						</button>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN  -->
						<view class="share-item y-f" @tap="share">
							<image class="share-img" :src="$IMG_URL + '/imgs/share_wx.png'" mode="widthFix"></image>
							<text class="share-title">微信好友</text>
						</view>
						<!-- #endif -->
						<view class="share-item y-f" @tap="
								sharePoster('/pages/public/poster/index', {
									id: shareData.id,
									image: shareData.image,
									title: shareData.title,
									price: posterType === 'groupon' ? shareData.groupon_price : shareData.price,
									original_price: shareData.original_price,
									teamNum: posterType === 'groupon' ? goodsInfo.num : 0,
									posterType: posterType,
									inviteCode:inviteCode,
									goodsInfo:{
										id:goodsInfo.id,
										name:goodsInfo.title,
										image:goodsInfo.image
									}
								})
							">
							<image class="share-img" :src="$IMG_URL + '/imgs/share_poster.png'" mode="widthFix"></image>
							<text class="share-title">分享海报</text>
						</view>

						<!-- <view class="share-item y-f" @tap="copySharePath">
							<image class="share-img"  :src="$IMG_URL + '/imgs/share_link.png'" mode=""></image>
							<text class="share-title">复制链接</text>
						</view> -->
					</view>
					<view class="share-foot x-c" @tap="hideModal">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 分享弹窗
	 * @property {Boolean} value = showModal - v-model控制显隐
	 * @property {String} modalType - 模态框类别
	 * @property {String} posterType - 海报类别
	 * @property {Object} goodsInfo - 海报数据
	 */
	export default {
		name: 'shoproShare',
		components: {

		},
		data() {
			return {
				showShareGuide: false, //H5的指引。
				shareData: {} //组装海报分享信息
			};
		},
		props: {
			value: {},
			modalType: {
				type: String,
				default: ''
			},
			posterType: {
				type: String,
				default: ''
			},
			goodsInfo: {
				type: Object,
				default: () => {}
			},
			inviteCode: {
				type: String,
				default: 'no'
			}
		},
		computed: {
			showModal: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		created() {
			let that = this;
			if (that.posterType === 'groupon') {
				that.shareData = that.goodsInfo.goods;
				that.shareData.id = that.goodsInfo.id;
			} else {
				that.shareData = that.goodsInfo;
				that.shareData.image = that.goodsInfo.image;
			}
			that.setShareInfo({
				query: {
					url: that.posterType + '-' + that.shareData.id
				},
				title: that.shareData.title,
				image: that.shareData.image
			});
		},

		methods: {
			copySharePath() {
				let that = this;
				that.showModal = false;
				uni.setClipboardData({
					data: this.shareInfo.copyLink,
					success: function(data) {
						//#ifdef H5
						that.$tools.toast('已复制到剪切板');
						//#endif
					},
					fail: function(err) {},
					complete: function(res) {}
				});
			},
			sharePoster(path, params) {
				let that = this;
				console.log(params)
				console.log(path)
				this.showModal = false;
				this.$Router.push({
					path: path,
					params: params
				});
			},
			hideModal() {
				console.log(1)
				this.showModal = false;
			},
			share() {
				let that = this;
				that.showModal = false;
				// #ifdef H5
				that.showModal = false;
				that.showShareGuide = true;
				// #endif
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: that.shareInfo.path,
					title: that.shareInfo.title,
					summary: that.shareData.title,
					imageUrl: that.shareData.image,
					success: res => {
						console.log('success:' + JSON.stringify(res));
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	.share-box {
		background: #fff;
		width: 750rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding-top: 30rpx;
		position: relative;

		.share-foot {
			font-size: 24rpx;
			color: #bfbfbf;
			height: 80rpx;
			border-top: 1rpx solid #eee;
		}

		.share-list-box {
			.share-btn {
				background: none;
				border: none;
				line-height: 1;
				padding: 0;

				&::after {
					border: none;
				}
			}

			.share-item {
				flex: 1;
				padding-bottom: 20rpx;

				.share-img {
					width: 70rpx;
					height: 70rpx;
					background: rgba(246, 246, 254, 1);
					border-radius: 50%;
					margin-bottom: 20rpx;
				}

				.share-title {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
</style>
